import { useState, useMemo } from "react"
import classNames from "classnames"
import './index.scss'
import { billTypeToName } from '@/contants/index'
import Icon from '@/components/Icon'

const DailyBill = (props) => {
    const inDetails = props.inDetails
    const inDate = props.inDate
    const statistics = useMemo(() => {
        const arr = Array.from(inDetails || [])
        const ret = {pay:0,income:0,balance:0}
        if(arr || arr.length > 0){
            arr.forEach(item => {
                if(item.type === 'pay') ret.pay += item.money
                if(item.type === 'income') ret.income += item.money
                ret.balance += item.money
            })
        }
        return ret
    },[inDetails])

    // 每次明细显示
    const [detailVisible, setDetailVisible] = useState(false)
    const handleClickDetailVisible = () => {
        setDetailVisible(!detailVisible)
    }

    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{inDate}</span>
                    <span className={classNames('arrow', detailVisible && 'expand')} 
                        onClick={handleClickDetailVisible}></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{statistics.pay}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{statistics.income}</span>
                    </div>
                    <div className="balance">
                        <span className="type">结余</span>
                        <span className="money">{statistics.balance}</span>
                    </div>
                </div>
            </div>
            {/* 单日列表 */}
            <div className="billList" style={{display: detailVisible ? 'block' : 'none'}}>
                {inDetails.map(item => {
                    return (
                        <div className="bill" key={item.id}>
                            <Icon type={item.useFor}/>
                            <div className="detail">
                                <div className="billType">{billTypeToName[item.useFor] || item.useFor}</div>
                            </div>
                            <div className={classNames('money', item.type)}>
                                {item.money.toFixed(2)}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default DailyBill